<template>
  <div>
    <el-dialog v-model="formDelete.dialog" title="确认" width="30%" center>
      <template #default>
        <div class="action_tip">
          您将删除:{{ formDelete.name }}
        </div>
      </template>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="formDelete.dialog = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="formEdit.dialog" :title="formEdit.PopupType" width="40%" center>
      <el-form :model="formEdit" label-width="120px" v-loading="loading">
        <el-form-item label="名称">
          <el-input v-model="formEdit.name"/>
        </el-form-item>
        <el-form-item label="指导老师">
          <el-input v-model="formEdit.leader"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="formEdit.dialog=false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </span>
      </template>
    </el-dialog>


    <div class="button_add">
      <el-button type="primary" @click="editLog(null)">添加</el-button>
      <el-input v-model="search.name"
                style="width: 240px"
                placeholder="输入名称查询">
      </el-input>
      <el-button type="primary" @click="getTableData">
        <el-icon>
          <Search></Search>
        </el-icon>
      </el-button>
    </div>
    <el-scrollbar>
      <el-table v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border
                :row-style="{height: '54.7px'}"
                style="font-size: 15px" stripe :data="tableData">

        <el-table-column prop="id" label="编号" width="auto"/>
        <el-table-column prop="name" label="学院" width="auto"/>
        <el-table-column prop="totalRank" label="总排名" width="auto"/>
        <el-table-column prop="totalPoints" label="总积分" width="auto"/>
        <el-table-column prop="leader" label="指导老师" width="auto"/>


        <el-table-column fixed="right" label="操作">
          <template #default="scopeEdit">
            <el-button
                type="danger"
                size="small"
                @click.prevent="deleteLog(scopeEdit.row.id,scopeEdit.row.name)">
              <el-icon>
                <Delete/>
              </el-icon>
              <span>删除</span>
            </el-button>
            <el-button
                type="primary"
                size="small"
                @click.prevent="editLog(scopeEdit.row.id)">
              <el-icon>
                <Edit/>
              </el-icon>
              <span>编辑</span>
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-scrollbar>

  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref, watch} from "vue";
import {Delete, Edit, Operation, Search} from '@element-plus/icons-vue'

import {
  updateCollegeApi, deleteCollegeApi,
  searchAllCollegeApi, getCollegeInfoByIdApi
} from "../api/admin";
import {ElMessage} from "element-plus";
import {ElLoading} from "element-plus/es";
import {closeLoading, showLoading, showTips, successTips, warningTips} from "@/utils/util";


const centerDialogVisible = ref(false)


//数据初始化
onMounted(() => {
  getTableData()
})


//分页
const page = reactive({
  current: 1,
  limit: 10,
  total: 0,
})


//分页操作


const tableData = ref([])
const loading = ref(true)
const search = reactive({
  name: "",
})

function getTableData() {
  searchAllCollegeApi(search).then((response: any) => {
    if (response.code === 200) {
      tableData.value = response.data
    } else {
      ElMessage.warning(response.msg)
    }
    loading.value = false
  }).catch(function (res: any) {
    loading.value = false
    ElMessage.error("页面加载失败")
  })

}


//添加修改数据初始化
const BtnConfirmAble = ref(true)


const formEdit = reactive({
  id: null,
  name: "",
  leader: "",
  totalPoints: 0,
  totalRank: 0,

  PopupType: "编辑",
  dialog: false
})

function editLog(id: any) {
  let formRaw = {
    id: id,
    name: "",
    leader: "",
    dialog: true
  }
  if (id) {
    getCollegeInfoByIdApi(formRaw).then((response: any) => {
      Object.assign(formRaw, response.data)
      Object.assign(formEdit, formRaw)
    })
  }else {
    Object.assign(formEdit, formRaw)
  }
}

function confirmEdit() {
  updateCollegeApi(formEdit).then((response: any) => {
    if (response.code === 200) {
      successTips(response.message)
    } else {
      warningTips(response.message)
    }
    loading.value = false
    formEdit.dialog = false
    getTableData()
  })
}

function Cancel() {
  formEdit.dialog = false;
}


const formDelete = reactive({
  id: null,
  name: '',
  dialog: false
})


function deleteLog(id: any, name: any) {
  Object.assign(formDelete, {
    id: id,
    name: name,
    dialog: true
  })

}

function confirmDelete() {
  showLoading()
  BtnConfirmAble.value = true
  deleteCollegeApi(formDelete)
      .then(function (response: any) {
        getTableData()
        formDelete.dialog = false
        ElMessage.success(response.message)
        closeLoading()
      })
}


</script>
